<template>
    <div class="tab-scroller">
        <!-- 这里有9中情况，每种情况的 项 和 具体字段 都不一样，因此会有9中判断 唉，脑阔大，不想多说 -->

        <!-- 1、确权登记: 所有权人、使用权人、共有情况、所有权证书附件、勘测定界报告、勘测定界图、权籍调查表、宗地图 -->
        <template v-if="recordData.name.includes('确权登记')">
            <div class="process-group">
                <div class="process-group__title">确权登记</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">所有权人：</span>
                        <div class="value">{{ recordData.parcelManagermentEntity?.landOwnerName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">使用权人：</span>
                        <div class="value">{{ recordData.ownershipEntity?.landUserName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">共有情况：</span>
                        <div class="value">{{ recordData.ownershipEntity?.sharedRightsHolder || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">所有权证书附件：</span>
                        <div class="value">
                            <template v-if="recordData.parcelManagermentEntity?.ownershipAttachment">
                                <a
                                    v-for="item in recordData.parcelManagermentEntity?.ownershipAttachmentFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">勘测定界报告：</span>
                        <div class="value">
                            <template v-if="recordData.parcelManagermentEntity?.delimitAttachm">
                                <a
                                    v-for="item in recordData.parcelManagermentEntity?.delimitAttachmFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                     </div>
                    <div class="process-cell">
                        <span class="label">勘测定界图：</span>
                        <div class="value">
                            <template v-if="recordData.parcelManagermentEntity?.surveyAttachment">
                                <a
                                    v-for="item in recordData.parcelManagermentEntity?.surveyAttachmentFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">权籍调查表：</span>
                        <div class="value">
                            <template v-if="recordData.parcelManagermentEntity?.investigationAttachment">
                                <a
                                    v-for="item in recordData.parcelManagermentEntity?.investigationAttachmentFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">宗地图：</span>
                        <div class="value">
                            <template v-if="recordData.parcelManagermentEntity?.landAttachment">
                                <a
                                    v-for="item in recordData.parcelManagermentEntity?.landAttachmentFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 2、入市动议: 动议时间、动议地点、动议结果、表决情况、村民代表大会决议书 -->
        <template v-if="recordData.name.includes('入市动议')">
            <div class="process-group">
                <div class="process-group__title">入市动议</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">动议时间：</span>
                        <div class="value">{{ recordData.landMotionDto?.meetTime || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">动议地点：</span>
                        <div class="value">{{ recordData.landMotionDto?.meetPlace || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">动议结果：</span>
                        <div class="value">{{ Number(recordData.landMotionDto?.motionResult) === 1 ? '通过' : '不通过' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">表决情况：</span>
                        <div class="value">
                            到会村名代表共 <strong>{{ recordData.landMotionDto.meetPeople }}</strong> 人，
                            同意入市 <el-text type="success">{{ recordData.landMotionDto.agreeNumber }}</el-text> 人，
                            不同意入市 <el-text type="danger">{{ recordData.landMotionDto.disagreeNumber }}</el-text> 人，
                            弃权 <el-text type="success">{{ recordData.landMotionDto.waiverNum || 0 }} </el-text> 人。
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">村民代表大会决议书：</span>
                        <div class="value">
                            <template v-if="recordData.landMotionDto.resolutionLetter">
                                <a
                                    v-for="item in recordData.landMotionDto.resolutionLetterFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 3、入市申请
            申请信息: 申请入市用途、申请入市方式、入市面积、出让年限、土地利用现状、是否存在地上附着、是否连同地上附着、入市开发要求
            审批信息: 流程记录、规划条件（出具）、产业准入（出具）、环境保护（出具）
        -->
        <template v-if="recordData.name.includes('入市申请')">
            <div class="process-group">
                <div class="process-group__title">申请信息</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">申请入市用途：</span>
                        <div class="value">{{ resolvePurpose(recordData.landEnterApplicationDto?.purpose) }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">申请入市方式：</span>
                        <div class="value">{{ resolveApproach(recordData.landEnterApplicationDto?.approach) }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">入市面积：</span>
                        <div class="value">{{ recordData.landEnterApplicationDto?.enterArea }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">出让年限：</span>
                        <div class="value">{{ recordData.landEnterApplicationDto?.transferPeriod }} 年</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">土地利用现状：</span>
                        <div class="value">{{ recordData.landEnterApplicationDto?.situation }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">是否存在地上附着：</span>
                        <div class="value">{{ Number(recordData.landEnterApplicationDto?.fixture) === 1 ? '是' : '否' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">是否连同地上附着：</span>
                        <div class="value">{{ Number(recordData.landEnterApplicationDto?.build) === 1 ? '是' : '否' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">入市开发要求：</span>
                        <div class="value">{{ recordData.landEnterApplicationDto?.developmentRequirement }}</div>
                    </div>
                </div>
            </div>

            <div class="process-group">
                <div class="process-group__title">审批信息</div>
                <div class="process-group__content">
                    <table class="_table_" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <td width="30%">审批节点</td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in recordData.landProcessRecordDto" :key="item.id">
                                <td width="30%">{{ item.operator || item.operate }}</td>
                                <td width="70%">
                                    {{ item.updateBy }}, 
                                    {{ item.createUnit }}, 
                                    {{ parseTime(item.createTime) }}, 
                                    {{ resolveReviewResult(item.reviewResult) }},
                                    {{ item.reviewOpinion }}
                                    <a
                                        v-for="file in item.stampedAttachmentFiles"
                                        :key="file.id"
                                        @click="downloadFile(file.filePath)"
                                        style="margin-left:10px;"
                                        class="link"
                                    >{{ file.fileName }}</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>                          
                </div>
            </div>

            <div class="process-group">
                <div class="process-group__title">规划条件(出具)</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <div class="label">规划用地性质：</div>
                        <div class="value">{{ resolvePurpose(recordData.landprovideDto.landPlanCondition?.landNature) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <div class="label">兼容用地性质：</div>
                        <div class="value">{{ resolvePurpose(recordData.landprovideDto.landPlanCondition?.compatibleLandNature) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <div class="label">建筑用地面积：</div>
                        <div class="value">{{ recordData.landprovideDto.landPlanCondition?.buildLandArea || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <div class="label">建筑密度：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landPlanCondition?.buildDensityLower || 0 }}% - {{ recordData.landprovideDto.landPlanCondition?.buildDensityUpper || 0 }}%
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">容积率：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landPlanCondition?.plotRateLower || 0 }}% - {{ recordData.landprovideDto.landPlanCondition?.plotRateUpper || 0 }}%
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">绿地率：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landPlanCondition?.greenRateLower || 0 }}% - {{ recordData.landprovideDto.landPlanCondition?.greenRateUpper || 0 }}%
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">建筑限高：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landPlanCondition?.buildHeightLower || 0 }}% - {{ recordData.landprovideDto.landPlanCondition?.buildHeightUpper || 0 }}%
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">详细规划：</div>
                        <div class="value">
                            <template v-if="recordData.landprovideDto.landPlanCondition?.detailPlanAttachment">
                                <a
                                    class="link" 
                                    v-for="file in recordData.landprovideDto.landPlanCondition?.detailPlanAttachmentFiles" 
                                    :key="file.id"
                                    @click="downloadFile(file.filePath)"
                                    style="margin-right:10px;"
                                >{{ file.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>

            <div class="process-group">
                <div class="process-group__title">产业准入(出具)</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <div class="label">产业准入要求：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landIndustrialAccess?.industryAccessRequirement || '--' }}
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">产业准入：</div>
                        <div class="value">
                            <template v-if="recordData.landprovideDto.landIndustrialAccess?.industryAccessAttachment">
                                <a
                                    class="link" 
                                    v-for="file in recordData.landprovideDto.landIndustrialAccess?.industryAccessAttachmentFiles" 
                                    :key="file.id"
                                    @click="downloadFile(file.filePath)"
                                    style="margin-right:10px;"
                                >{{ file.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>

            <div class="process-group">
                <div class="process-group__title">环境保护(出具)</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <div class="label">环境保护要求：</div>
                        <div class="value">
                            {{ recordData.landprovideDto.landEnvironmentProtect?.envRequirement || '--' }}
                        </div>
                    </div>
                    <div class="process-cell">
                        <div class="label">环境保护：</div>
                        <div class="value">
                            <template v-if="recordData.landprovideDto.landEnvironmentProtect?.envOtherAttachment">
                                <a
                                    class="link" 
                                    v-for="file in recordData.landprovideDto.landEnvironmentProtect?.envOtherAttachmentFiles" 
                                    :key="file.id"
                                    @click="downloadFile(file.filePath)"
                                    style="margin-right:10px;"
                                >{{ file.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 4、入市方案 
            方案信息: 入市方式、出让年限、交易方式、竞买保证金、基准价、成交价、评估价、起始价、增价幅度、保留底价、开工时间、竣工时间、缴清价款时间、入市方案附件、集体收益分配
            审批信息: 流程记录
        -->
        <template v-if="recordData.name.includes('入市方案')">
            <div class="process-group">
                <div class="process-group__title">方案信息</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">入市方式：</span>
                        <div class="value">{{ resolveApproach(recordData.landEnterPlanDto.approach) }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">出让年限：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.transferPeriod || '--' }} 年</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">交易方式：</span>
                        <div class="value">{{ resolveTransactionModes(recordData.landEnterPlanDto.transactionApproach) }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">竞买保证金：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.auctionDeposit || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">基准价：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">成交价：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">评估价：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">起始价：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.auctionStartPrice || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">增价幅度：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.priceIncreaseRate || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">保留底价：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.reservedPrice || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">开工时间：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.startYear || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">竣工时间：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.endYear || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">缴清价款时间：</span>
                        <div class="value">{{ recordData.landEnterPlanDto.payOff || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">入市方案附件：</span>
                        <div class="value">
                            <template v-if="recordData.landEnterPlanDto?.otherAttachment">
                                <el-link
                                    v-for="item in recordData.landEnterPlanDto?.otherAttachmentFiles"
                                    :key="item.id"
                                    class="link"
                                    @click="downloadFile(item.filePath)"
                                    style="margin-left:10px;"
                                >{{ item.fileName }}</el-link>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                    <div class="process-cell flex-column">
                        <span class="label">集体收益分配：</span>
                        <div class="value">
                            <table cellspacing="0" cellpadding="0" class="_table_">
                                <thead>
                                    <tr>
                                        <td>项目</td>
                                        <td>比例</td>
                                        <td>备注</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in distribution" :key="index">
                                        <td>{{ item.subject }}</td>
                                        <td>{{ item.percent }}%</td>
                                        <td>{{ item.mark }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="process-group">
                <div class="process-group__title">审批信息</div>
                <div class="process-group__content">
                    <table class="_table_" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <td width="30%">审批节点</td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in recordData.LandPlanProcessRecordDto" :key="item.id">
                                <td width="30%">{{ item.operator || item.operate }}</td>
                                <td width="70%">
                                    {{ item.updateBy }}, 
                                    {{ item.createUnit }}, 
                                    {{ parseTime(item.createTime) }}, 
                                    {{ resolveReviewResult(item.reviewResult) }},
                                    {{ item.reviewOpinion }}
                                    <a
                                        v-for="file in item.stampedAttachmentFiles"
                                        :key="file.id"
                                        @click="downloadFile(file.filePath)"
                                        style="margin-left:10px;"
                                        class="link"
                                    >{{ file.fileName }}</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>  
                </div>
            </div>
        </template>

        <!-- 5、入市公告：公告标题、公告编号、开始时间、招拍挂时间、招拍挂地点、竞买保证金、公告详情（附件） -->
        <template v-if="recordData.name.includes('入市公告')">
            <div class="process-group">
                <div class="process-group__title">入市公告</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">公告标题：</span>
                        <div class="value">{{ recordData.announcementDto?.announcementTitle || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">公告编号：</span>
                        <div class="value">{{ recordData.announcementDto?.announcementCode || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">开始时间：</span>
                        <div class="value">{{ recordData.announcementDto?.startTime || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">招拍挂时间：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">招拍挂地点：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">竞买保证金：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">公告详情：</span>
                        <div class="value">
                            <template v-if="recordData.assignmentContractDto?.contractStampId">
                                <a href="#" :data-url="recordData.assignmentContractDto.contractStampPath" class="link">{{ recordData.assignmentContractDto.contractStampName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 6、成交公示：公示标题、公示编号、开始时间、受让人、成交时间、成交地点、交易方式、交易金额、公示详情（附件） -->
        <template v-if="recordData.name.includes('成交公示')">
            <div class="process-group">
                <div class="process-group__title">成交公示</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">公示标题：</span>
                        <div class="value">{{ recordData.dealPublicityDto?.publicityTitle || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">公示编号：</span>
                        <div class="value">{{ recordData.dealPublicityDto?.publicityCode || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">开始时间：</span>
                        <div class="value">{{ recordData.dealPublicityDto?.startTime || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">受让人：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">成交时间：</span>
                        <div class="value">{{ parseTime(recordData.dealPublicityDto?.publishTime) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">成交地点：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">交易方式：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">交易金额：</span>
                        <div class="value">--</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">公告详情：</span>
                        <div class="value">
                            <template v-if="recordData.dealPublicityDto?.fileIds">
                                <a
                                    v-for="item in recordData.dealPublicityDto?.files"
                                    :key="item.id"
                                    @click="downloadFile(item.filePath)"
                                    class="link"
                                    style="margin-right:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 7、合同签署: 合同编号、签订日期、出让人、受让人、交易合同附件、履约项（表） -->
        <template v-if="recordData.name.includes('合同签署')">
            <div class="process-group">
                <div class="process-group__title">合同签署</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">合同编号：</span>
                        <div class="value">{{ recordData.assignmentContractDto?.contractNumber }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">签订日期：</span>
                        <div class="value">{{ parseTime(recordData.assignmentContractDto.contractSigningDate, '{y}/{m}/{d}') }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">出让人：</span>
                        <div class="value">{{ recordData.assignmentContractDto.sellerName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">受让人：</span>
                        <div class="value">{{ recordData.assignmentContractDto.buyerName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">交易合同附件：</span>
                        <div class="value">
                            <template v-if="recordData.assignmentContractDto.contractStampId">
                                <a href="#" :data-url="recordData.assignmentContractDto.contractStampPath" class="link">{{ recordData.assignmentContractDto.contractStampName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">履约项：</span>
                        <!-- <div class="value">{{ resolveOptionName(recordData.assignmentContractDto.type) }}</div> -->
                        <div class="value">
                            <table cellspacing="0" cellpadding="0" class="_table_">
                                <thead>
                                    <tr>
                                        <td>履约项</td>
                                        <td>合同要求</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in performanceItems" :key="index">
                                        <td>{{ item.label }}</td>
                                        <td>{{ item.value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 8、使用权登记: 土地使用权人、权利性质、不动产单元号、共有情况、使用权证书附件 -->
        <template v-if="recordData.name.includes('使用权登记')">
            <div class="process-group">
                <div class="process-group__title">使用权登记</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">土地使用权人：</span>
                        <div class="value">{{ recordData.landContractOwnershipDto?.landUserName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">权利性质：</span>
                        <div class="value">{{ resolvePropertyOfRight(recordData.landContractOwnershipDto?.rightType) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">不动产单元号：</span>
                        <div class="value">{{ recordData.landContractOwnershipDto?.unitNumber || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">共有情况：</span>
                        <div class="value">{{ recordData.landContractOwnershipDto?.commonSituation || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">使用权证书附件：</span>
                        <div class="value">
                            <template v-if="recordData.landContractOwnershipDto?.certificateAttachment">
                                <a
                                    v-for="item in recordData.landContractOwnershipDto?.certificateAttachmentFiles"
                                    :key="item.id"
                                    @click="downloadFile(item.filePath)"
                                    class="link"
                                    style="margin-right:10px;"
                                >{{ item.fileName }}</a>
                            </template>
                            <template v-else>--</template>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 9、违约记录: (节点显示异常的履约项和当前状态)
            异常项、状态（未处理、保持异常·处理次数、恢复正常）、异常发生时间、异常描述、处理完成时间、处理说明 
        -->
        <template v-if="recordData.name.includes('违约记录')">
            <div class="process-group">
                <div class="process-group__title">违约记录</div>
                <div class="process-group__content">
                    <div class="process-cell">
                        <span class="label">异常项：</span>
                        <div class="value">{{ recordData.performanceContractDto?.typeName || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">状态：</span>
                        <div class="value">
                            <el-tag type="success" plain v-if="recordData.performanceContractDto?.status === 1">
                                {{ recordData.performanceContractDto?.handleCount === 0 ? '正常' : `恢复正常处理 ${recordData.performanceContractDto?.handleCount}次` }}
                            </el-tag>
                            <el-tag type="danger" plain v-else-if="recordData.performanceContractDto?.status === 2">
                                {{ recordData.performanceContractDto?.handleCount > 0 ? `保持异常处理${recordData.performanceContractDto?.handleCount}次` : '未处理' }}
                            </el-tag>
                        </div>
                    </div>
                    <div class="process-cell">
                        <span class="label">异常发生时间：</span>
                        <div class="value">{{ parseTime(recordData.performanceContractDto?.createTime) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">异常描述：</span>
                        <div class="value">{{ recordData.performanceContractDto?.abnormalDescription || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">处理完成时间：</span>
                        <div class="value">{{ parseTime(recordData.performanceContractDto?.updateTime) || '--' }}</div>
                    </div>
                    <div class="process-cell">
                        <span class="label">处理说明 ：</span>
                        <div class="value">{{ recordData.performanceContractDto?.processIllustrate || '--' }}</div>
                    </div>
                </div>
            </div>
        </template>
    </div>    
</template>

<script setup>
import { parseTime, convertTreeToList } from '@/utils';
import { api_getLandOfUseList } from '@/api/app';
import useAppStore from '@/store/modules/app';
import { transactionModes } from '@/utils/dict';

const appStore = useAppStore();

const props = defineProps({
    recordData: {
        type: Object,
        default: {}
    }
})

// 集体收益分配是个json字符串，需要单独解码
const distribution = ref([]);
const performanceItems = ref([]);

watch(() => props.recordData, val => {
    if (val && val.name === '入市方案') {
        distribution.value = val.landEnterPlanDto.distribution ? JSON.parse(val.landEnterPlanDto.distribution) : [];
    }

    if (val && val.name === '合同签署') {
        const { assignmentContractDto } = val;
        console.log(assignmentContractDto)
        performanceItems.value = [
            {
                label: "出让土地交付日期",
                value: parseTime(assignmentContractDto?.deliveryDate, '{y}/{m}/{d}') || '--',
            }, 
            {
                label: "交付条件",
                value: assignmentContractDto?.deliveryCondition || '--',
            },
            {
                label: "出让价款缴纳",
                value: "",
            },
            {
                label: "定金缴纳",
                value: "",
            },
            {
                label: "税金",
                value: assignmentContractDto.taxes ? `税金金额：${assignmentContractDto.taxes}元` : '--',
            },
            {
                label: "开工时间",
                value: parseTime(assignmentContractDto?.commencementDate, '{y}/{m}/{d}') || '--',
            },
            {
                label: "竣工时间",
                value: parseTime(assignmentContractDto?.completionDate, '{y}/{m}/{d}') || '--',
            },
            {
                label: "开发投资强度",
                value: assignmentContractDto?.devInvestIntensity || '--',
            },
            {
                label: "宗地规划条件",
                value: assignmentContractDto?.landPlanCondition || '--',
            },
            {
                label: "宗地建设配套",
                value: assignmentContractDto?.landConstructionFacility || '--',
            }
        ]

        if (assignmentContractDto.paymentMethod === '0') {
            // 定金一次性缴纳
            performanceItems.value[2].value =  `出让价款总额：${assignmentContractDto.sellPrice}元，出让价款缴纳日期：
                ${ parseTime(assignmentContractDto?.paymentDate, '{y}/{m}/{d}') || '--'}`;
            performanceItems.value[3].value =  `定金总额：${assignmentContractDto.deposit}元，支付方式：一次性缴纳`;
        } else {
            // 定金分期付款
            let str = "";
            const arr = JSON.parse(assignmentContractDto.paymentDetail);
            const len = arr.length;
            arr.forEach((element, index) => {
                if (index !== len - 1) {
                    str = str.concat(
                        `第${element.num}于 ${element.date} 支付${element.amount}元；`
                    );
                } else {
                    str = str.concat(
                        `第${element.num}于 ${element.date} 支付${element.amount}元。`
                    );
                }
            });
            performanceItems.value[2].value =  `出让价款总额：${assignmentContractDto.sellPrice}元`;
            performanceItems.value[3].value =  `定金总额：${assignmentContractDto.deposit}元，支付方式：分期付款，
                分${assignmentContractDto.paymentPeriod}期，${str}`;
        }
    }
});

// 解析交易方式
function resolveTransactionModes(val) {
    return transactionModes.find(item => item.id === Number(val))?.label;
}

// 获取土地用途
const landOfUseList = ref([]);
function getLandOfUseList() {
    api_getLandOfUseList().then(res => {
        landOfUseList.value = res.data;
    })
}
getLandOfUseList();

// 解析入市用途
function resolvePurpose(val) {
    if (!val || val.length <= 0) {
        return '--';
    }

    const useList = [];
    landOfUseList.value.forEach(item => {
        let tmp = convertTreeToList(item);
        useList.push(...tmp);
    });

    const tmp = val.split(',');
    const code = tmp[tmp.length - 1];
    return useList.find(item => item.code === code)?.name;
}

// 获取 入市方式 列表
const approachList = computed(() => {
    return appStore.dictData.rshfsh?.list || [];
});


// 解析入市方式
function resolveApproach(val) {
    return approachList.value.find(item => item.value === val)?.label;
}

// 解析履约项
const optionList = ['', "出让土地交付日期", "交付条件", "出让价款缴纳", "收益分配", "定金缴纳", "税金", "开工时间", "竣工时间", "开发投资强度",  "宗地规划条件",  "宗地建设配套"];
function resolveOptionName(val) {
    return optionList[val];
}

// 解析审查结果
const reviewConfig = ['', '通过', '不通过', '驳回'];
function resolveReviewResult(val) {
    return reviewConfig[val];
}

// 权利性质
const propertyOfRightList = computed(() => appStore.dictData.qlxzh?.list || []);
// 解析权利性质
function resolvePropertyOfRight(val) {
    return propertyOfRightList.value.find(item => item.value === val)?.label;    
}

// 下载
function downloadFile(filePath) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = filePath;
    document.body.appendChild(link);
    link.click();
    setTimeout(() => {
        uni.postMessage({
            data: {
                action: 'DOWNLOAD'
            }
        })
    }, 300);
}
</script>

<style lang="scss" scoped>
.tab-scroller {
    height: 360px;
    transition: all .3s;
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
        background-color: #e1e6ec;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(144, 147, 153, 0.5);
    }
}

.process-group {
    &__title {
        height: 52px;
        padding-left: 23px;
        padding-right: 15px;
        display: flex;
        align-items: center;
        background-color: #F3F4F8;
        font-size: 15px;
        color: #333;
        font-weight: 600;
        position: relative;

        &::before {
            content: '';
            width: 3px;
            height: 15px;
            background-color: #0096CF;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    &__content {         
        padding: 10px;
        .process-cell {
            padding-top: 5px;
            padding-bottom: 5px;
            display: flex;
            color: #666;
            font-size: 14px;
            line-height: 20px;
            .value {
                flex: 1;
            }

            &.flex-column {
                flex-direction: column;
                .value {
                    margin-top: 5px;
                }
            }
        }

        .link {
            color: #0096CF !important;
            text-decoration: underline !important;
        }
    }

    &.line {
        padding-top: 15px;
        position: relative;
        &::before {
            content: '';
            width: 100%;
            height: 1px;
            background-color: #37A2D2;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}

._table_ {
    width: 100%;
    border-left: solid 1px #ddd;
    border-top: solid 1px #ddd;
    td {
        border-right: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
        padding: 5px;
        font-size: 12px;
        color: #666;
    }
}
</style>